<template>
  <div class="user-query-component">
    <el-form-item label="用户账号">
      <el-select
        v-model="searchQuery"
        filterable
        remote
        reserve-keyword
        placeholder="请输入用户完整手机号"
        :no-data-text="'没有搜索到该用户'"
        :remote-method="fetchSuggestions"
        :loading="loading"
        maxlength="11"
        style="width: 280px"
        :popper-options="{
          modifiers: [{ name: 'computeStyles', options: { adaptive: false } }],
        }"
        clearable
        @clear="clearInfo"
      >
        <el-option
          v-for="item in suggestions"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
    </el-form-item>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import userInfo from '@/modules';
const { userInfoApi } = userInfo;
const emit = defineEmits(['setUserInfo']);
// 搜索框的输入内容
const searchQuery = ref('');
// 输入框下拉请求状态
const loading = ref(false);
// 控制下拉建议的内容
const suggestions = ref([]);
// 记录form清空用不然页面显示undefined
const recordForm = ref(null);
//  API 请求
const fetchSuggestions = async (queryString) => {
  loading.value = true; // 开始加载
  // 输入的值小于11位就不去请求
  if (queryString.length < 11) return (suggestions.value = []);
  try {
    // 发起 API 请求获取用户数据
    const { data } = await userInfoApi({ phone: queryString });
    if (data) {
      emit('setUserInfo', data);
      recordForm.value = data;
      // 请求到数据组装成el-select想要的格式
      suggestions.value = [
        {
          label: data.phone, // 显示在下拉框中的手机号
          value: data.id, // 下拉框的值，选中后传递的值
          nick: data.nick, // 昵称，供后续使用
        },
      ];
    } else {
      suggestions.value = []; // 如果没有数据则清空建议
    }
  } catch (error) {
    console.log('error:', error);
    // 如果请求失败或者没有数据，清空建议
    clearInfo();
    suggestions.value = [];
  } finally {
    loading.value = false;
  }
};
// 清空input
const clearInfo = () => {
  const result = clearObjectValues(recordForm.value);
  emit('setUserInfo', result);
};
// 清空对象中 每个值
const clearObjectValues = (obj) => {
  if (typeof obj !== 'object' || obj === null) return obj;
  // 遍历对象的每一个键
  Object.keys(obj).forEach((key) => {
    obj[key] = ''; // 将每个值设置为空字符串
  });
  return obj;
};
</script>

<style scoped lang="scss">
.user-query-component {
  margin-bottom: 20px;
}
</style>
